import React from 'react'
import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById('root'))

// jsx语法
const element = (
  // 所有元素必须具有一个父元素
  // 可以用空标签包起来
  <>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div className="demo">222</div>
    <label htmlFor="id11">请输入名字</label>
    <input type="text" id="id11" />
  </>
)

function fn() {
  return (
    <>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <div className="demo">222</div>
      <label htmlFor="id11">请输入名字</label>
      <input type="text" id="id11" />
    </>
  )
}

// root.render(<div>{element}</div>)
root.render(
  <>
    <div>{fn()}</div>
    <h1>22</h1>
    <p>555</p>
  </>
)
